

<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>日常管理</el-breadcrumb-item>
      <el-breadcrumb-item>维修</el-breadcrumb-item>
      <el-breadcrumb-item><b>维修申请</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
    <!-- 搜索框 -->
    <div style="margin:40px 20px 10px 10px">
      <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline">
        <el-form-item label="报修人" prop="sname">
          <el-input v-model="searchFormModel.sname" placeholder="请输入报修人" clearable style="width: 120px"/>
        </el-form-item>
        <el-form-item label="报修时间" prop="repairDt" >
          <el-date-picker
              v-model="searchFormModel.repairDt"
              type="date"
              placeholder="选择日期"
              clearable
              style="width: 140px"
              >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报修内容" prop="content">
          <el-select v-model="searchFormModel.content" placeholder="请选择维修内容"  style="width: 160px;">
            <el-option label="电脑" value="电脑" ></el-option>
            <el-option label="电话" value="电话" ></el-option>
            <el-option label="网络" value="网络" ></el-option>
            <el-option label="饮水机" value="饮水机" ></el-option>
            <el-option label="楼层复印件" value="楼层复印件" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchOnSubmit">
            <el-icon><Search /></el-icon>&nbsp;查询
          </el-button>
          <el-button type="success" @click="dialogAddState=true" >
            <el-icon><Plus /></el-icon>&nbsp;申请报修
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--  表格-->
    <div style="margin:20px">
      <el-table :data="repairInfo" stripe border style="width: 100%">
        <el-table-column prop="id" label="序号" v-if="show"/>
        <el-table-column prop="dept" label="部门"/>
        <el-table-column prop="door" label="门牌号"/>
        <el-table-column prop="sname" label="报修人"  />
        <el-table-column prop="content" label="维修内容"  />
        <el-table-column prop="repairDt" label="报修时间" />
        <el-table-column prop="other" label="其他问题" />
        <el-table-column prop="reason" label="撤销原因" />
        <el-table-column prop="status" label="状态" />
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button
                size="small"
                type="danger"
                :disabled="scope.row.status === '已撤销' || scope.row.status === '已接单'|| scope.row.status === '已退单'"
                @click="tableEditHandler(scope.$index, scope.row)">
              <el-icon><RefreshLeft /></el-icon>&nbsp;撤销
            </el-button>

            <el-button
                size="small"
                type="primary"
                :disabled="scope.row.status === '已退单'|| scope.row.status === '已撤销' "
                @click="openDialog(scope.$index, scope.row)">
              <el-icon><View /></el-icon>&nbsp;查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  分页-->
    <div class="page">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5,8]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="sizes, prev, pager, next"
          :total="totals"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <!-- 报修 -->
    <el-dialog v-model="dialogAddState" title="维修申请" width="580">
      <div>
        <el-form ref="formAddRef" :model="formAdd"
                 label-width="120px">
          <el-form-item label="维修部门">
            <el-input v-model="formAdd.dept" placeholder="请输入部门" required="required" ></el-input>
<!--            <el-select v-model="formAdd.dept" placeholder="请选择维修部门">
              <el-option
                  v-for="item in deptValue"
                  :key="item.id"
                  :label="item.deptname"
                  :value="item.deptname">
              </el-option>
            </el-select>-->
          </el-form-item>
          <el-form-item label="门牌号">
            <el-input v-model="formAdd.door" placeholder="请输入门牌号"  required="required" ></el-input>
          </el-form-item>
          <el-form-item label="报修人">
            <el-input v-model="formAdd.sname" placeholder="请输入报修人姓名"  required="required" ></el-input>
          </el-form-item>
          <el-form-item label="维修内容">
            <el-select v-model="formAdd.content" placeholder="请选择维修内容"  required="required" >
              <el-option label="电脑" value="电脑" ></el-option>
              <el-option label="电话" value="电话" ></el-option>
              <el-option label="网络" value="网络" ></el-option>
              <el-option label="饮水机" value="饮水机" ></el-option>
              <el-option label="楼层复印件" value="楼层复印件" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="其他问题">
            <el-input v-model="formAdd.other" type="textarea" maxlength="50" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogAddOnReset">取消</el-button>
          <el-button type="primary"  @click="dialogAddOnSubmit" >确认</el-button>
        </div>
      </template>
    </el-dialog>
    <!--  编辑-->
    <el-dialog v-model="dialogEditState" title="撤销原因" width="380">
      <div>
        <el-form ref="formEditRef" :model="formEdit"
                 label-width="120px">
          <el-form-item prop="id" v-if="false">
            <el-input v-model="formEdit.id" ></el-input>
          </el-form-item>
          <el-form-item prop="reason" label="原因">
            <el-input v-model="formEdit.reason"  type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogEditOnReset">取消</el-button>
          <el-button type="primary"  @click="dialogEditOnSubmit" >确认</el-button>
        </div>
      </template>
    </el-dialog>
<!-- 查看详情   -->
    <el-dialog title="详情" v-model="dialogVisible">
      <div class="detail-container">
        <div>
          <label for="repairMan">维修人：</label>
          <span id="repairMan">{{ detail.repairMan }}</span>
        </div>
        <div>
          <label for="loppyDt">维修日期：</label>
          <span id="loppyDt">{{ detail.loppyDt }}</span>
        </div>
        <div>
          <label for="situation">维修进度：</label>
          <span id="situation">{{ detail.situation }}</span>
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
</template>
<script setup>

import {ArrowRight, Delete, View, Plus, Search,RefreshLeft} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/daily";
import {ElMessage} from "element-plus";
onMounted(()=>{
  getRepair();
})
//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const repairInfo=ref([]);
//搜索框
const searchFormRef=ref();
const searchFormModel=reactive({
  sname:'',
  repairDt:'',
  content:''
})
const  getRepair=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含其他参数
  };
  if (searchFormModel.sname && searchFormModel.sname.trim() !== ''){
    params.sname=searchFormModel.sname.trim();
  }
  if (searchFormModel.content && searchFormModel.content.trim() !== ''){
    params.content=searchFormModel.content.trim();
  }
  if (searchFormModel.repairDt){
    const date=new Date(searchFormModel.repairDt);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const formattedDate2 =  `${year}-${month}-${day}`;
    params.repairDt=formattedDate2;
  }
  request({
    url:'/repairApply/getAll',
    method:'get',
    params,
  }).then((req)=>{
    if (200==req.data.errorCode){
      repairInfo.value=req.data.data.records/*.slice(0,2)*/;
      totals.value=req.data.data.total;
    }
  })
}
const searchOnSubmit=()=>{
  getRepair();
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getRepair();
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getRepair();
}

const dialogAddState = ref(false)
const formAddRef = ref()
// 新增表单初始化数据
const formAddData = {
  dept:'',
  door:'',
  sname:'',
  content:'',
  other:''
}
// 新增表单绑定数据模型
const formAdd = reactive({...formAddData})   // ...formAddData 解构formAddData

const dialogAddOnSubmit = () => {
  request({
    method: 'post',
    url: '/repairApply/insert',
    data: formAdd,
  }).then(req => {
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: req.data.msg
      })
      Object.assign(formAdd, formAddData)
      getRepair();
    }
  })
  dialogAddState.value=false;
}
const dialogAddOnReset = () => {
  // 清空表单数据
  Object.assign(formAdd , formAddData)
  // 关闭对话框
  dialogAddState.value = false
}

//编辑
const formEditRef = ref()
const formEditData = {
  id:'',
  reason:'',
  status:'',
}
// 编辑表单绑定数据模型
const formEdit = reactive({...formEditData})
const tableEditHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)
  formEdit.id=rowData.id
  formEdit.other = rowData.other
  dialogEditState.value = true
}
const dialogEditState = ref(false)
const dialogEditOnSubmit = () => {
  request({
    url: '/repairApply/updateS',
    method: 'put',
    data: JSON.stringify(formEdit),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(response => {
    if (response.data.errorCode == 200) {
      ElMessage({
        type: 'success',
        message: '撤销成功！',
      });
      dialogEditState.value = false
      getRepair();
    } else {
      ElMessage({
        type: 'error',
        message: '撤销失败！',
      });
    }
  })
}
const dialogEditOnReset = () => {
  Object.assign(formEdit , formEditData)
  dialogEditState.value = false
}
///////////////////详情////////////////////////////////////////
const dialogVisible = ref(false);
const detail = ref({});

const openDialog=(row,index)=>{
  detail.value.repairMan=index.repairMan;
  detail.value.loppyDt=index.loppyDt;
  detail.value.situation=index.situation;
  dialogVisible.value = true;
}
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
.detail-container div {
  margin-bottom: 10px; /* 为每行增加一些间距 */
}

.detail-container label {
  margin-right: 10px; /* 标签与值之间的间距 */
  font-weight: bold; /* 加粗标签文本 */
}

.detail-container span {
  font-style: italic; /* 斜体表示值 */
}
</style>